<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="content">我的账户</block>
		</cu-custom>
		<view>
			<view class="padding margin" style="border-radius: 15px;" :class="'bg-'+theme.themeColor">
				<view class="flex justify-center align-center text-sm">
					账户余额（元）
				</view>
				<view class="flex justify-center align-center text-xxl text-white text-price padding">
					{{userInfo.accountBalance ? userInfo.accountBalance :0.00}}
				</view>
			</view>
			<view class="bg-white padding-sm">
				<view class="flex justify-between">
					<view>
						充值
					</view>
					<view>
						提现
					</view>
				</view>
				<view class="grid col-3">
					<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
						<button class="cu-btn orange lg block" :class="item.value == checkedValue?'line-orange':''"
							@tap="chooseCheckbox" :data-value="item.value"> {{item.name}}

						</button>
					</view>
				</view>
				<button class="cu-btn shadow-blur block margin-sm round bottom-btn " :class="'bg-'+theme.themeColor"
					@click="phoneSub">去充值</button>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				checkedValue: 10,
				userInfo: {},
				checkbox: [{
					value: 10,
					name: '10元',
					checked: false,
				}, {
					value: 20,
					name: '20元',
					checked: true,
				}, {
					value: 30,
					name: '30元',
					checked: true,
				}, {
					value: 50,
					name: '50元',
					checked: false,
				}, {
					value: 100,
					name: '100元',
					checked: false,
				}, {
					value: 200,
					name: '200元',
					checked: false,
				}]
			}
		},
		onLoad() {
			getApp().initPage().then(res => {})
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			chooseCheckbox(e) {
				this.checkedValue = e.currentTarget.dataset.value;
			},
			getUserInfo() {
				let that = this;
				this.$store.dispatch("GetInfo").then((res) => {
					that.userInfo = res
				}).catch(() => {})
			},
		}
	}
</script>

<style>
</style>
